<template>
  <div class="home-sub-nav">
    <!-- <div class='home-currNav-title'>{{currMenu}}</div> -->
    <ul class='home-sub-nav-list'>
      <!-- <li class='home-sub-nav-item'
          v-for='(subNav, index) of subMenuList' :key='"subNav" + index'
          :class='{active: pathRoute.indexOf(subNav.path) !== -1}'
          @click='selectSubNav(subNav)'>
        {{subNav.menuName}}
      </li> -->
      <li class='home-sub-nav-item'
          v-for='(subNav, index) of currSubMenuList' :key='"subNav" + index'>
        <div class='home-sub-nav-item-title'>{{subNav.menuName}}</div>
        <ul class='home-sub-nav-item-children'>
          <li class='home-sub-nav-item-child'
              v-for='(thirdNav, thirdIndex) of subNav.children' :key='"thirdNav" + thirdIndex'
              :class='{active: pathRoute.indexOf(thirdNav.path) !== -1}'
              @click='selectSubNav(thirdNav)'>
            {{thirdNav.menuName}}
          </li>
        </ul>
        <div class='home-sub-nav-item-split'>
          <p></p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // currSubMenuList: this.subMenuList
    }
  },
  computed: {
    currMenu () {
      return this.menuName
    },
    currSubMenuList () {
      return this.subMenuList
    }
  },
  methods: {
    selectSubNav (subNav) {
      this.linkTo({ path: subNav.path })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home-sub-nav
    scroll()
    height 100%
    padding 10px
    box-sizing border-box
    .home-currNav-title
      padding: 12px 10px;
      font-weight: 700;
      font-size: 12px;
      font-weight 700
      margin-bottom 10px
    .home-sub-nav-list
      .home-sub-nav-item
        font-size: 12px;
        position: relative;
        margin: 2px 0;
        display: block;
        color: #595961;
        line-height 17px
        .home-sub-nav-item-title
          padding: 12px 10px;
          font-weight: 700;
          font-size: 12px;
          color #000
          font-weight 700
        .home-sub-nav-item-children
          .home-sub-nav-item-child
            padding: 12px 10px 12px 12px;
            font-size: 12px;
            position: relative;
            margin: 2px 0;
            display: block;
            color: #595961;
            cursor pointer
            line-height 17px
            &:hover, &.active
              color: #35323b;
              background: #e9eaf0;
              border-radius: 6px;
            &.active
              &::after
                content: ''
                width: 0;
                height: 0;
                border-color: transparent transparent transparent #000;
                border-style: solid;
                border-width: 4px 0 4px 6px;
                position: absolute;
                right: 10px;
                top: 16px;
        .home-sub-nav-item-split
          padding: 12px 10px;
          p
            height: 1px;
            background: #e3e2e5;
            margin: 0;
</style>
